<style scoped>
/* #d1 {
  margin: 0 auto;
} */
.box {
  position: absolute;
  top: 270pt;
  width: 100%;
  
  }
.box /deep/ .van-field__label {
  width: 3.2em;
}
#p1 {
  font-size: 28pt;
  position: absolute;
  top: 30pt;
  left: 39pt;
  color: #ffffff;
}
#p2 {
  font-size: 26pt;
  position: absolute;
  top: 60pt;
  left: 39pt;
  color: #ffffff;
}
#p3 {
  font-size: 20pt;
  position: absolute;
  top: 203pt;
  left: 22pt;
  color: #333;
}
.van-cell {
  width: 65%;
  overflow: hidden;
  color: #323233;
  font-size: 14px;
  line-height: 24px;
  background-color: #fff;
}
#img1 {
  position: absolute;
  right: 10pt;
    bottom: 77pt;
}
</style>
<template >
  <div id="d1">
    <!-- <img src="/Img/Login.png" alt="#"> -->
    <mt-header
      title="注册"
      style="background-image:linear-gradient(to top, #c471f5 0%, #fa71cd 100%); ;
      "
    >
      <router-link to="/login" slot="right">
        <mt-button>登录</mt-button>
      </router-link>
      <mt-button icon="back" slot="left"
        ><router-link to="/" style="color: white">返回</router-link></mt-button
      >
    </mt-header>
    <div>
      <p id="p1">Hi~</p>
      <p id="p2">欢迎注册</p>
      <p id="p3">注册</p>
      <img style="width: 100%" src="/Img/Login.png" alt="" />
    </div>
    <div class="box">
      <van-form style="">
        <!-- <van-form @submit="onSubmit"> -->
        <van-field
          left-icon="/Img/filed1.png"
          v-model="names"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写需要要注册的用户名' }]"
        />
        <van-field
          left-icon="/Img/emil (1).png"
          v-model="email"
          name="注册邮箱"
          label="邮箱"
          placeholder="注册邮箱"
          :rules="[{ required: true, message: '请填写要注册的邮箱' }]"
        />

        <van-field
          left-icon="/Img/filed2.png"
          v-model="userpwd"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
          left-icon="/Img/filed2.png"
          v-model="userpwds"
          type="password"
          name="密码"
          label="密码"
          placeholder="请再次输入密码"
          :rules="[{ required: true, message: '请在次填写密码' }]"
        />
        <div style="margin:0 auto">
        <van-field
          v-model="values"
          left-icon="/Img/filed1.png"
          name="验证码"
          label="验证码"
          :rules="[{ required: true, message: '请填写验证码' }]"
          placeholder="请输入验证码"
        >
        </van-field>
        <img src="/register" id="img1" alt="">
   </div>
        <van-radio-group v-model="aa">
          <van-radio
            style="margin-left: 14pt; font-size: 10pt"
            @click="v_radio"
            @change="namess"
            :name="namess"
            shape="square"
          ></van-radio>
          <div
            @click="div_xy"
            style="font-size: 10pt;
              margin-right: 163pt;
              margin-top: -14pt;
              color: #646566;
            "
          >
            注册协议
          </div>
        </van-radio-group>
        <div style="margin: 16px">
          <van-button
            id="btn"
            round
            style="background-color: #e171de; border: 1px solid #e171de"
            type="info"
            :disabled="btn1"
            native-type="submit"
            @click="chreFrom"
            size="large"
            >提交注册
          </van-button>
        </div>
      </van-form>
    </div>
    <!-- <img style="width:80%;margin-top:15px" src="/Img/注册Bottom.gif" alt=""> -->
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      // 验证码
      values: "",
      // 用户名
      names: "",
      // 邮箱
      username: "",
      // 密码
      userpwd: "",
      //第二遍密码
      userpwds: "",
      // 邮箱
      email: "",
      namess: "1",
      btn1: true,
      aa: "",
    };
  },
  watch: {
    // 监视radio
    namess(e) {
      if (this.namess == "") {
        this.namess = 1;
      } else if (this.namess == 1) {
        this.namess = "";
      }
    },
  },
  methods: {
    // 注册协议
    div_xy() {
      alert(
        "用户名和昵称的注册与使用应符合网络道德，遵守中华人民共和国的相关法律法规"
      );
    },
    // radio单选框
    v_radio() {
      if (this.bt1 == false) {
        this.btn1 = true;
      } else {
        this.btn1 = false;
      }
    },
    onSubmit(values) {
      // console.log("submit", values);
      //  this.axios.post('/register',`username=${this.username}&userpwd=${this.userpwd}&email=${this.email}`,(result)=>{
      //    console.log(result)
      //  })
    },
    cheEmail() {
      let reg =
        /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
      if (reg.test(this.email)) {
        // console.log("邮箱输入正确1");
        return true;
      } else {
        // console.log("邮箱输入错误1");
        return false;
      }
    },
    chenames() {
      let reg = /^[0-9A-Za-z]{6,15}$/;
      if (reg.test(this.names)) {
        // console.log("用户名输入正确1");
        return true;
      } else {
        // console.log("用户名输入错误1");
        return false;
      }
    },
    cheuserpwd() {
      let reg = /^\w{6,15}$/;
      if (reg.test(this.userpwd)) {
        // console.log("密码输入正确1");
        return true;
      } else {
        // console.log("密码输入错误1");
        return false;
      }
    },

    chreFrom() {
      if (this.cheEmail() && this.chenames() && this.cheuserpwd()) {
        axios
          .post(
            "/register",
            `email=${this.email}&userpwd=${this.userpwd}&username=${this.names}`
          )
          .then((result) => {
            if (result.status == 200) {
              this.$router.push("/login");
            } else {
              alert("注册失败");
            }
          });
      }
      ``;
    },
  },
};
</script>